<template>
  <div class="page morality">
    <div class="page-container">
      <el-row :gutter="15" type="flex" style="width: 100%;height: 100%;margin: 0">
        <el-col :span="7" class="col">
          <el-row class="row">
            <Card title="法制宣防数据总览">
              <PublicityOverview/>
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="普法活跃度排行">
              <ActiveRanking />
            </Card>
          </el-row>
        </el-col>
        <el-col :span="10" class="col">
          <el-row class="row">
            <Card title="典型案例展示">
              <TypicalCasePresentation />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="年度宣讲类型">
              <PresentationType />
            </Card>
          </el-row>
        </el-col>
        <el-col :span="7" class="col">
          <el-row class="row">
            <Card title="普法活动直播">
              <ActiveLive />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="宣防任务追踪">
              <TaskTracking />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="警民联合工作日志">
              <WorkLog />
            </Card>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Card from '@/components/Card.vue'
import PublicityOverview from '@/components/Morality/PublicityOverview.vue'
import ActiveRanking from '@/components/Morality/ActiveRanking.vue'
import TypicalCasePresentation from '@/components/Morality/TypicalCasePresentation.vue'
import ActiveLive from '@/components/Morality/ActiveLive.vue'
import TaskTracking from '@/components/Morality/TaskTracking.vue'
import WorkLog from '@/components/Morality/WorkLog.vue'
import DeepSeek from '@/components/Morality/DeepSeek.vue'
import PresentationType from "@/components/Morality/PresentationType";

export default {
  components: {PresentationType, WorkLog, TaskTracking, ActiveLive, TypicalCasePresentation, ActiveRanking, PublicityOverview, Card,DeepSeek }

}
</script>
<style lang="scss" scoped>
.page.morality{
  .page-container{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    .col{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      .row{
        width: 100%;
        height: calc(100%/3 - 10px);
      }
    }
    .col:nth-child(1){
      .row{
        height: calc(100%/2 - 10px);
      }
    }
    .col:nth-child(2){
      .row:nth-child(1){
        height: calc(100%/4*2.5 - 10px);
      }
      .row:nth-child(2){
        height: calc(100%/4*1.5 - 10px);
      }
    }
  }
}
</style>
